<template>
  <div>
    <el-form-item label="开始占位内容">
      <el-input v-model="localData.startPlaceholder" clearable placeholder="开始日期的占位内容" />
    </el-form-item>
    <el-form-item label="结束占位内容">
      <el-input v-model="localData.endPlaceholder" clearable placeholder="结束日期的占位内容" />
    </el-form-item>
    <el-form-item label="值格式化">
      <el-select
        size="default"
        v-model="localData.valueFormatStr"
        clearable
      >
        <el-option value="YY" label="年(YY)" />
        <el-option value="YYYY" label="年(YYYY)" />
        <el-option value="YYYY-MM" label="年-月" />
        <el-option value="YYYY-MM-DD" label="年-月-日" />
        <el-option value="YYYY-MM-DD HH" label="年-月-日 时" />
        <el-option value="YYYY-MM-DD HH:mm" label="年-月-日 时:分" />
        <el-option value="YYYY-MM-DD HH:mm:ss" label="年-月-日 时:分:秒" />
      </el-select>
    </el-form-item>
    <el-form-item label="显示格式化">
      <el-select
        size="default"
        v-model="localData.showFormat"
        clearable
      >
        <el-option value="YY" label="年(YY)" />
        <el-option value="YYYY" label="年(YYYY)" />
        <el-option value="YYYY-MM" label="年-月" />
        <el-option value="YYYY-MM-DD" label="年-月-日" />
        <el-option value="YYYY-MM-DD HH" label="年-月-日 时" />
        <el-option value="YYYY-MM-DD HH:mm" label="年-月-日 时:分" />
        <el-option value="YYYY-MM-DD HH:mm:ss" label="年-月-日 时:分:秒" />
      </el-select>
    </el-form-item>
    <el-form-item label="默认开始时间">
      <el-select v-model="localData.defaultStartTime" clearable @change="handleStartTypeChange">
        <el-option v-for="opt in defaultDateTimeOptions" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="自定义函数" v-if="localData.defaultStartTime == 'custom'">
      <el-input type="textarea" v-model="localData.customStartTimeFunc" />
    </el-form-item>
    <el-form-item label="默认结束时间">
      <el-select v-model="localData.defaultEndTime" clearable @change="handleEndTypeChange">
        <el-option v-for="opt in defaultDateTimeOptions" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="自定义函数" v-if="localData.defaultEndTime == 'custom'">
      <el-input type="textarea" v-model="localData.customEndTimeFunc" />
    </el-form-item>
  </div>
</template>

<script>

export default {
  name: 'DateRangeConfig',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {},
      defaultDateTimeOptions: [
        {
          label: '上个月',
          value: 'lastmonth'
        },
        {
          label: '昨天',
          value: 'yesterday'
        },
        {
          label: '当前时间',
          value: 'now'
        },
        {
          label: '明天',
          value: 'tomorrow'
        },
        {
          label: '下个月',
          value: 'nextmonth'
        },
        {
          label: '自定义',
          value: 'custom'
        }
      ],
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal)
      },
      deep: true
    }
  },
  methods: {
    handleStartTypeChange(value) {
      if (value == 'custom') {
        this.localData.customStartTimeFunc = '(dayjs)=>{\n}';
      }
    },
    handleEndTypeChange(value) {
      if (value == 'custom') {
        this.localData.customEndTimeFunc = '(dayjs)=>{\n}';
      }
    }
  }
}
</script>
